<template>
  <div :class="$style.wrapper">
    <el-row :class="$style.row">
      <el-row :class="$style.rowTop">
        <el-row :class="$style.rowHeightFull">
          <el-col :span="20" :class="$style.rowHeightFull">
            <div :class="$style.padding10">
              <div id="indexEchart" :class="$style.rowHeightFull">

              </div>
            </div>
          </el-col>
          <el-col :span="4" :class="$style.rightBox">
            <div :class="$style.padding10">
              <p :class="$style.textColor">测点选择</p>
              <el-select v-model="selectedMessurePointObj" filterable placeholder="请选择" :class="$style.pointSelect" value-key="name" @change='messurePointChange(selectedMessurePointObj)'>
                <el-option
                  v-for="item in sourceValueArr"
                  :key="item.name"
                  :label="item.label"
                  :value="item">
                </el-option>
              </el-select>
              <p :class="$style.textColor">关键指标</p>
              <el-checkbox-group v-model="selectedKpis" size= "medium" text-color= "#fedc32" fill= "#6a582d">
                <el-checkbox
                  v-for="item in subaccessConfigValues"
                  :label="item.kpiName"
                  :key="item.kpiId"
                  :value="item.kpiName">
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-col>
        </el-row>
      </el-row>
      <el-row :class="$style.rowBottom">
        <table>
          <tbody>
            <tr>
              <el-button type="primary" :class="$style.memoryBtn" @click="dialogFormVisible = true;">新增备忘信息</el-button>
            </tr>
          </tbody>
        </table>
        <!-- Form -->
        <el-dialog title="备忘信息" :visible.sync="dialogFormVisible">
          <el-form :model="dialogForm" :rules="rules" ref="dialogForm">
            <el-form-item label="备忘名称:" :label-width="formLabelWidth" prop="values.name">
              <el-input v-model="dialogForm.values.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="发生时间:" :label-width="formLabelWidth" prop="resumeDate">
               <el-date-picker
                v-model="dialogForm.resumeDate"
                type="date"
                placeholder="选择日期">
               </el-date-picker>
            </el-form-item>
            <el-form-item label="备注:" :label-width="formLabelWidth" prop="values.remark">
              <el-input v-model="dialogForm.values.remark" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit('dialogForm')">确 定</el-button>
          </div>
        </el-dialog>
        <div :class="$style.box">
          <ul :class="$style.timeline">
            <li v-for="(group, index) in ctrlGroups" :key="index">
              <i :class="group.icon" @click="remarkFn(group.icon)"></i>
              <div :class="$style.timelinItem">
                <span :class="$style.time">{{group.time}}</span>
                <h3 v-for="(item, ind) in group.disList" :key="ind" :class="$style.timelineHeader" :title="item.value" v-html="item.value"></h3>
              </div>
            </li>
          </ul>
        </div>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex';
import api from './../../../common/js/api';
// import echartsFactory from './../../../common/js/ehcarts-factory.js';
export default {
  name: 'CharacteristicIndexTracking',
  data () {
    return {
      data: {},
      sourceValueArr: [],
      // multiSelectValues: {},
      selectedMessurePointObj: {},
      accessConfigValues: [],
      subaccessConfigValues: [],
      keyKpis: [],
      selectedKpis: [],
      resumeList: [],
      appNameList: [
        {id: 61000, dictCode: 'appName', valueCode: '5', label: '当日点检', desc: null, param: null, parentCode: null},
        {id: 61001, dictCode: 'appName', valueCode: '6', label: '点检异常', desc: null, param: null, parentCode: null},
        {id: 61002, dictCode: 'appName', valueCode: '7', label: '精密检测', desc: null, param: null, parentCode: null},
        {id: 61003, dictCode: 'appName', valueCode: '8', label: '检修计划', desc: null, param: null, parentCode: null},
        {id: 61004, dictCode: 'appName', valueCode: '1', label: '在线预警', desc: null, param: null, parentCode: null},
        {id: 61005, dictCode: 'appName', valueCode: '2', label: '智能诊断', desc: null, param: null, parentCode: null},
        {id: 61006, dictCode: 'appName', valueCode: '3', label: '大数据分析', desc: null, param: null, parentCode: null},
        {id: 61007, dictCode: 'appName', valueCode: '4', label: '离线诊断', desc: null, param: null, parentCode: null},
        {id: 61008, dictCode: 'appName', valueCode: '10', label: '工艺信号预警', desc: null, param: null, parentCode: null},
        {id: 61009, dictCode: 'appName', valueCode: '11', label: '平台规则预警', desc: null, param: null, parentCode: null},
        {id: 61012, dictCode: 'appName', valueCode: '430', label: '点检异常', desc: null, param: null, parentCode: null},
        {id: 4020040, dictCode: 'appName', valueCode: '12', label: '过程数据预警', desc: null, param: null, parentCode: null}
      ],
      ctrlGroups: [],
      ctrlGroup: [{
        time: '2017-11-12 12:30:10',
        icon: 'fa alerts-critical proudsmart ps-bw_repair',
        disList: [{
          value: '<a href="#">报警产生</a>'
        }, {
          value: '报警类型：振动报警'
        }, {
          value: '报警描述：速度有效值:1.250mm/s超出预警范围'
        }]
      }, {
        time: '2017-11-12 12:30:10',
        icon: 'fa fa-user bg-aqua bg-red', // bg-orange
        disList: [{
          value: '<a href="#">检修反馈</a>'
        }]
      }, {
        time: '2017-11-12 12:30:10',
        icon: 'fa fa-user fa-fw fa-circle-o bg-green',
        disList: [{
          value: '<a href="#">检修反馈</a>'
        }]
      }],
      dialogFormVisible: false,
      dialogForm: {
        values: {
          name: '',
          remark: ''
        },
        resumeDate: ''
      },
      rules: {
        'values.name': [{
          required: true, message: '请输入备忘名称', trigger: 'blur'
        }, {
          min: 1, max: 10, message: '长度在1到10个字符', trigger: 'blur'
        }],
        resumeDate: [{
          type: 'date', required: true, message: '请选择发生时间', trigger: 'change'
        }],
        'values.remark': [{
          required: true, message: '请填写备注', trigger: 'blur'
        }]

      },
      formLabelWidth: '120px'
    };
  },
  methods: {
    submit (formName) {
      let self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('submit');
          let param = [];
          if (self.dialogForm && self.dialogForm.id) {
            // 编辑备忘
            param = [{
              deviceCode: self.dialogForm.deviceCode,
              id: self.dialogForm.id,
              psiotDeviceId: self.dialogForm.psiotDeviceId,
              resumeDate: self.dialogForm.resumeDate,
              type: self.dialogForm.type,
              values: self.dialogForm.values
            }];
            self.addRemark(param);
            self.dialogFormVisible = false;
          } else {
            // 新增备忘
            param = [{
              'type': 'remark',
              'psiotDeviceId': this.currentResourceId,
              'values': {'name': this.dialogForm.values.name, 'remark': this.dialogForm.values.remark},
              'resumeDate': this.dialogForm.resumeDate
            }];
            this.addRemark(param);
            this.dialogFormVisible = false;
          }
        } else {
          console.log('error submit!!!');
          return false;
        }
      });
      this.getResumeList();
    },
    remarkFn (evt) {
      if (evt.includes('alert')) {

      } else if (evt.includes('mainten')) {

      } else if (evt.includes('remark')) {
        let remark = document.getElementsByClassName('remark')[0];
        let remarkObj = JSON.parse(remark.parentNode.children[1].lastChild.lastChild.innerHTML);
        this.dialogFormVisible = true;
        // let remarkObj = JSON.parse($(this).siblings().find('h3:last>span').html());
        this.dialogForm = remarkObj;
      }
    },
    messurePointChange (ele) {
      debugger;
      this.selectedMessurePointObj = ele;
      this.subaccessConfigValues = this.accessConfigValues.filter(elem => elem.instance == ele.name);
      this.keyKpis = this.subaccessConfigValues;
      this.selectedKpis = this.keyKpis.map(ele => ele.kpiName);
    },
    getResumeList () {
      api.post('deviceResumeUIService.getDeviceResumeList', [this.currentResourceId, {}]).then(ret => {
        if (ret.code == 0) {
          this.resumeList = ret.data;
          this.resumeList.forEach((v, i) => {
            let item = {};
            item.time = v.resumeDate;
            if (v.type == 'alert') {
              let appNameListName;
              this.appNameList.forEach(val => {
                v.values = v.values || {};
                if (val.valueCode == v.values.appName) {
                  appNameListName = val.label;
                }
              });
              if (v.values.severity == '4') {
                item.icon = 'fa alerts-black proudsmart ps-bw_alarm alert';
              } else if (v.values.severity == '3') {
                item.icon = 'fa alerts-critical proudsmart ps-bw_alarm alert';
              } else if (v.values.severity == '2') {
                item.icon = 'fa alerts-minor proudsmart ps-bw_alarm alert';
              }
              item.disList = [{
                value: '报警消息: ' + v.values.alertTitle
              }, {
                value: '报警来源: ' + appNameListName
              }, {
                value: '综合判断结论: ' + v.values.multipleConclusion
              }, {
                value: '处理方案建议: ' + v.values.cessingScheme
              }, {
                value: '<span style="display:none" value="' + v.values.ticketNo + '"></span>'
              }];
            } else if (v.type == 'mainten') {
              item.icon = 'fa bg-green proudsmart ps-bw_repair mainten';
              item.disList = [{
                value: '工程项目名称: ' + v.values.standardProjectName
              }, {
                value: '工时数: ' + v.values.repairWorkPeriod
              }, {
                value: '<span style="display:none" value="' + v.values.ticketNo + '"></span>'
              }];
            } else if (v.type == 'remark') {
              item.icon = 'fa bg-blue proudsmart ps-bw_memo remark';
              item.disList = [{
                value: '备忘名称: ' + v.values.name
              }, {
                value: '备注: ' + v.values.remark
              }, {
                value: '<span style="display:none" value="' + v + '">' + JSON.stringify(v) + '</span>'
              }];
            }
            this.ctrlGroups.push(item);
          });
        }
      });
    },
    addRemark (param) {
      this.dialogForm = {};
      api.post('deviceResumeUIService.saveDeviceResume', param).then(ret => {
        if (ret.code == '0') {
          this.getResumeList();
        }
      });
    },
    init () {
      this.getResumeList();
    }
  },
  mounted () {
    this.init();
    api.post('resourceUIService.getResourceById', this.currentResourceId).then(ret => {
      this.data = ret.data;
      this.accessConfigValues = this.data.physicalConfig ? this.data.physicalConfig.accessConfigs : '';
      if (this.accessConfigValues) {
        api.post('resourceUIService.getAttrsByModelId', [this.data.modelId]).then(attrs => {
          let MeasurePointLocate = attrs.data.find(elem => elem.name == 'MeasurePointLocate') || {};
          let sourceValue = JSON.parse(MeasurePointLocate.sourceValue) || [];
          let sourceValueArr = [];
          for (var i in sourceValue) {
            for (var j in sourceValue[i]) {
              for (var k in sourceValue[i][j]) {
                sourceValueArr.push(sourceValue[i][j][k]);
              }
            }
          };
          this.sourceValueArr = sourceValueArr;
          if (sourceValueArr.length > 0) {
            this.selectedMessurePointObj = sourceValueArr[0];
            this.keyKpis = this.accessConfigValues.filter(ele => ele.instance == this.selectedMessurePointObj.name);
            this.subaccessConfigValues = this.keyKpis;
            this.selectedKpis = this.keyKpis.map(ele => ele.kpiName);
          };
        });
      };
    });
  },
  computed: {
    ...mapGetters('role', ['currentRole']),
    ...mapState('resource', ['currentResourceId'])
  }
};
</script>
<style lang="scss" module>
@import "./../../../style/default/characteristic-index-tracking.scss";
</style>
